//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

/* ==========================================================================
   Navigation

//== Regions
//## Behavior in the different regions
========================================================================== */
// When used in topbar
.region-topbar {
    .mx-navigationtree {
        background-color: $navtopbar-bg;
        .navbar-inner > ul {
            & > li {
                & > a {
                    color: $navtopbar-color;
                    border-color: $navtopbar-border-color;
                    background-color: $navtopbar-bg;
                    font-size: $navtopbar-font-size;
                    .caret {
                        border-top-color: $navtopbar-color;
                        border-bottom-color: $navtopbar-color;
                    }

                    .glyphicon {
                        font-size: $navtopbar-glyph-size;
                    }
                }
                a:hover,
                a:focus,
                a.active {
                    color: $navtopbar-color-hover;
                    background-color: $navtopbar-bg-hover;
                    .caret {
                        border-top-color: $navtopbar-color-active;
                        border-bottom-color: $navtopbar-color-active;
                    }
                }
                a.active {
                    color: $navtopbar-color-active;
                    border-left-color: $navtopbar-color-active;
                    background-color: $navtopbar-bg-active;
                }
            }
        }

        /* Sub navigation item specific */
        li.mx-navigationtree-has-items {
            & > ul {
                background-color: $navtopbar-sub-bg;
                li {
                    a {
                        color: $navtopbar-sub-color;
                        background-color: $navtopbar-sub-bg;
                        font-size: $navtopbar-sub-font-size;
                        &:hover,
                        &:focus,
                        &.active {
                            color: $navtopbar-sub-color-hover;
                            background-color: $navtopbar-sub-bg-hover;
                        }
                        &.active {
                            color: $navtopbar-sub-color-active;
                            background-color: $navtopbar-sub-bg-active;
                        }
                    }
                }
            }
        }
    }
}

// When used in sidebar
.region-sidebar {
    .mx-navigationtree {
        background-color: $navsidebar-bg;
        .navbar-inner > ul {
            & > li {
                & > a {
                    color: $navsidebar-color;
                    border-color: $navsidebar-border-color;
                    background-color: $navsidebar-bg;
                    font-size: $navsidebar-font-size;
                    .caret {
                        border-top-color: $navsidebar-color;
                        border-bottom-color: $navsidebar-color;
                    }

                    .glyphicon {
                        font-size: $navsidebar-glyph-size;
                    }
                }
                a:hover,
                a:focus,
                a.active {
                    color: $navsidebar-color-hover;
                    background-color: $navsidebar-bg-hover;
                    .caret {
                        border-top-color: $navsidebar-color-active;
                        border-bottom-color: $navsidebar-color-active;
                    }
                }
                a.active {
                    color: $navsidebar-color-active;
                    border-left-color: $navsidebar-color-active;
                    background-color: $navsidebar-bg-active;
                }
            }
        }

        /* Sub navigation item specific */
        li.mx-navigationtree-has-items {
            & > ul {
                background-color: $navsidebar-sub-bg;
                li {
                    a {
                        color: $navsidebar-sub-color;
                        background-color: $navsidebar-sub-bg;
                        font-size: $navsidebar-sub-font-size;
                        &:hover,
                        &:focus,
                        &.active {
                            color: $navsidebar-sub-color-hover;
                            background-color: $navsidebar-sub-bg-hover;
                        }
                        &.active {
                            color: $navsidebar-sub-color-active;
                            background-color: $navsidebar-sub-bg-active;
                        }
                    }
                }
            }
        }
    }
}


//== Design Properties
//## Helper classes to change the look and feel of the component
//-------------------------------------------------------------------------------------------------------------------//
// Content Centerd text and icons
.nav-content-center-text-icons.mx-navigationtree {
    .navbar-inner ul {
        a {
            flex-direction: column;
            justify-content: center;
            .glyphicon {
                margin: 0 0 5px 0;
            }
        }
    }
}

// Content Centerd icons only
.nav-content-center.mx-navigationtree {
    .navbar-inner ul {
        a {
            justify-content: center;
        }
    }
}
